// 全局变量
:root {
  // 主题色系
  --primary-gradient: linear-gradient(135deg, #00c853 0%, #69f0ae 100%);
  --secondary-gradient: linear-gradient(135deg, #2979ff 0%, #82b1ff 100%);
  --surface-gradient: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
  
  // 颜色变量
  --primary: #00c853;
  --primary-light: #69f0ae;
  --primary-dark: #00a043;
  --secondary: #2979ff;
  --surface: #ffffff;
  --background: #f5f8fa;
  
  // 阴影
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.15);
  
  // 动画时间
  --transition-fast: 0.2s;
  --transition-normal: 0.3s;
  --transition-slow: 0.5s;
}

// 全局动画
@keyframes float {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  25% { transform: translate(10px, -10px) rotate(5deg) scale(1.05); }
  50% { transform: translate(0, -20px) rotate(0deg) scale(1.1); }
  75% { transform: translate(-10px, -10px) rotate(-5deg) scale(1.05); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

@keyframes shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

@keyframes slideIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

// 基础样式重置
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #303133;
}

// Element Plus 样式覆盖
.el-button {
  &--primary {
    background: var(--primary-gradient);
    border: none;
    transition: all var(--transition-normal);
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 200, 83, 0.3);
    }
  }
}

.el-menu {
  --el-menu-active-color: var(--primary-color);
  --el-menu-hover-bg-color: #f1f8e9;
}

// Dashboard 容器样式
.dashboard-container {
  display: flex;
  height: 100vh;
  background: var(--background);

  // 左侧边栏
  .dashboard-aside {
    width: 240px;
    background: white;
    border-right: 1px solid #e8f5e9;
    display: flex;
    flex-direction: column;
    
    .aside-header {
      padding: 16px;
      border-bottom: 1px solid #e8f5e9;
      
      .logo {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 18px;
        font-weight: 600;
        color: var(--primary);
      }
    }

    .folder-section {
      flex: 1;
      padding: 16px 0;
      overflow-y: auto;
      
      .section-header {
        padding: 0 16px;
        margin-bottom: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        span {
          font-size: 14px;
          font-weight: 500;
          color: #606266;
        }
      }

      .folder-menu {
        border-right: none;
        
        .el-menu-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 16px;
          height: 40px;
          
          .folder-name {
            flex: 1;
            margin: 0 12px;
          }
          
          .folder-count {
            font-size: 12px;
            color: #909399;
            padding: 2px 6px;
            border-radius: 10px;
          }
          
          &:hover {
            background: #f0f9ff;
          }
          
          &.is-active {
            background: #ecf5ff;
            color: var(--primary);
            
            &::before {
              content: '';
              position: absolute;
              left: 0;
              top: 0;
              bottom: 0;
              width: 3px;
              background: var(--primary);
              border-radius: 0 2px 2px 0;
            }
          }
        }
      }
    }

    .friends-section {
      padding: 16px;
      border-top: 1px solid #e8f5e9;
      
      .section-header {
        margin-bottom: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        span {
          font-size: 14px;
          font-weight: 500;
          color: #606266;
        }
      }

      .friends-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        
        .friend-item {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 8px;
          border-radius: 8px;
          cursor: pointer;
          
          &:hover {
            background: #f0f9ff;
          }
          
          .friend-avatar {
            position: relative;
            
            .status-dot {
              position: absolute;
              right: -2px;
              bottom: -2px;
              width: 8px;
              height: 8px;
              border-radius: 50%;
              background: #67c23a;
              border: 2px solid white;
            }
          }
          
          .friend-info {
            flex: 1;
            min-width: 0;
            
            .friend-name {
              display: block;
              font-size: 14px;
              font-weight: 500;
              color: #303133;
            }
            
            .friend-status {
              font-size: 12px;
              color: #67c23a;
            }
          }
        }
      }
    }
  }

  // 主内容区
  .dashboard-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    
    .main-header {
      height: 64px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 24px;
      background: white;
      border-bottom: 1px solid #e8f5e9;
      
      .header-right {
        display: flex;
        align-items: center;
        gap: 16px;
        
        .search-input {
          width: 240px;
        }
      }
    }

    .main-content {
      flex: 1;
      padding: 24px;
      overflow-y: auto;
      
      // 网格视图
      .files-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
        
        .file-card {
          background: white;
          border-radius: 12px;
          overflow: hidden;
          transition: all 0.2s;
          border: 1px solid #e8f5e9;
          
          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
          }
          
          .card-preview {
            height: 140px;
            background: #f8fafc;
            display: flex;
            align-items: center;
            justify-content: center;
            
            .el-icon {
              font-size: 48px;
              color: var(--primary);
            }
          }
          
          .card-content {
            padding: 16px;
            
            .card-header {
              display: flex;
              justify-content: space-between;
              align-items: flex-start;
              margin-bottom: 12px;
              
              .card-title {
                font-size: 14px;
                font-weight: 500;
                color: #2c3e50;
                margin: 0;
                flex: 1;
                margin-right: 12px;
              }
            }
            
            .card-meta {
              display: flex;
              justify-content: space-between;
              align-items: center;
              
              .modified-time {
                font-size: 12px;
                color: #909399;
                display: flex;
                align-items: center;
                gap: 4px;
              }
              
              .collaborators {
                display: flex;
                align-items: center;
                
                .el-avatar {
                  border: 2px solid white;
                  margin-left: -8px;
                  
                  &:first-child {
                    margin-left: 0;
                  }
                }
                
                .more-users {
                  width: 24px;
                  height: 24px;
                  border-radius: 50%;
                  background: #f5f7fa;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  font-size: 12px;
                  color: #909399;
                  margin-left: -8px;
                }
              }
            }
          }
          
          .card-actions {
            padding: 12px;
            background: #f8fafc;
            border-top: 1px solid #e8f5e9;
            display: flex;
            justify-content: flex-end;
            gap: 8px;
          }
        }
      }

      // 列表视图
      .files-list {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        
        .list-header {
          display: grid;
          grid-template-columns: 2fr 100px 160px 160px 120px;
          gap: 16px;
          padding: 12px 20px;
          background: #f8fafc;
          border-bottom: 1px solid #e8f5e9;
          
          .header-cell {
            font-size: 13px;
            font-weight: 500;
            color: #606266;
          }
        }
        
        .list-body {
          .list-item {
            display: grid;
            grid-template-columns: 2fr 100px 160px 160px 120px;
            gap: 16px;
            padding: 12px 20px;
            align-items: center;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
            
            &:hover {
              background: #f8fafc;
            }
            
            .cell {
              &.name {
                display: flex;
                align-items: center;
                gap: 12px;
                
                .el-icon {
                  color: var(--primary);
                }
              }
              
              &.collaborators {
                .avatar-group {
                  display: flex;
                  align-items: center;
                }
              }
              
              &.actions {
                opacity: 0;
                transition: opacity 0.2s;
              }
            }
            
            &:hover .cell.actions {
              opacity: 1;
            }
          }
        }
      }
    }
  }
}

// 自定义滚动条
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 200, 83, 0.2);
  border-radius: 4px;
  
  &:hover {
    background: rgba(0, 200, 83, 0.3);
  }
}
.el-radio-button__inner{
  border: none !important
}
.is-active .el-radio-button__inner{
  background-color: #00c853 !important;
}
// 导入其他模块样式
@import './components/sidebar.scss';
@import './components/header.scss';
@import './components/file-grid.scss';
@import './components/chat.scss'; 